<!DOCTYPE html>

<html>
	<head>
		<meta charset="utf-8" />
		<title>物体组合及辅助坐标系 - iThreeJS</title>
		<style type="text/css">
			* {margin:0;padding:0;}
			html, body {overflow:hidden;}
		</style>
	</head>
	
	<body>
		
		<script type="text/javascript" src="../../assets/js/three.min.js"></script>
		<script type="text/javascript">
			//全局变量
			const w = window.innerWidth;
			const h = window.innerHeight;
			const r = w / h;
			const s = 300;
			
			//场景
			let scene = new THREE.Scene();
			
			//物体
			let cubeGeo = new THREE.BoxGeometry(100, 100, 100);
			let cubeMtl = new THREE.MeshBasicMaterial({
				color: 0x00ffff,
				wireframe: true
			});
			let cube = new THREE.Mesh(cubeGeo, cubeMtl);
			
			let ballGeo = new THREE.SphereGeometry(80, 6, 6);
			let ballMtl = new THREE.MeshBasicMaterial({
				color: 0xffff00,
				wireframe: true
			});
			let ball = new THREE.Mesh(ballGeo, ballMtl);
			
			//设置物体中心点位置
			cube.position.set(300, 0, 0);
			ball.position.set(0, 0, 300);
			
			//物体组合
			let group = new THREE.Group();
			group.add(cube);
			group.add(ball);

			scene.add(group);
			
			//光照
			let aLight = new THREE.AmbientLight(0x404040); //创建环境光
			scene.add(aLight); //把环境光添加到场景中
			
			//辅助坐标系
			let aHelper = new THREE.AxesHelper(300);
			scene.add(aHelper);
			
			//照相机
			let camera = new THREE.OrthographicCamera(-s * r, s * r, s, -s, 1, 1000);
			camera.position.set(300, 200, 300);
			camera.lookAt(scene.position);
			
			//let camera = new THREE.PerspectiveCamera(75, r, 1, 1000);
			//camera.position.set(400, 300, 400);
			//camera.lookAt(scene.position);
			
			//渲染器
			let renderer = new THREE.WebGLRenderer();
			renderer.setSize(w, h);
			document.body.appendChild(renderer.domElement);
			
			//执行渲染
			function render() {
				renderer.render(scene, camera);
				
				cube.rotation.y += 0.01;
				ball.rotation.y += 0.01;
				
				requestAnimationFrame(render);
			}
			render();
		</script>
	</body>
</html>